<template>
	<view v-show="scrollTopTo >= highlyTop">
		<view class="m-fixed u-border-bottom m-h-60">
			<view class="u-flex u-flex-1 u-flex-center" :class="index > 0 ? 'u-border-left' : ''" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">
				<view class="m-c-9" :class="index === cut ? 'm-c-l-g' : ''">{{ item.label }}</view>
				<u-icon name="arrow-down" :color="index === cut ? '#0D523F' : '#999'" size="10"></u-icon>
			</view>
		</view>
		<u-popup :show="show" :overlay="false" :duration="0" mode="top" height="200rpx" :customStyle="{ top: '30px' }">
			<view v-if="cut === 0" class="u-p-20">
				<view class="cut1-item u-flex u-flex-between u-border-bottom" v-for="(item, index) in params.list" :key="index" @click="cut1 = index">
					<view>{{ item.label }}</view>
					<u-icon v-if="cut1 === index" name="checkbox-mark" color="#2979ff" size="24"></u-icon>
				</view>
			</view>
			<view v-else class="u-p-20">
				<view class="cut1-item">{{ params.title }}</view>
				<view class="u-flex u-flex-wrap">
					<view class="cut2-item" :class="cut2 === index ? 'item-on' : ''" v-for="(item, index) in params.list" :key="index" @click="cut2 = index">{{ item.label }}</view>
				</view>
			</view>
			<view class="u-flex">
				<view class="u-flex-1" @click="show = false"><u-button type="primary" :plain="true" text="重置" class="button-one" color="#0e5642"></u-button></view>
				<view class="u-flex-1" @click="determine"><u-button type="primary" color="#0e5642" loadingSize="60" class="button-two">提交筛选</u-button></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'guide-room',
	data() {
		return {
			cut: null,
			cut1: 0,
			cut2: null,
			tabList: [
				{
					label: '区域',
					status: false
				},
				{
					label: '总价',
					status: false
				},
				{
					label: '户型',
					status: false
				},
				{
					label: '面积',
					status: false
				}
			],
			show: false,
			params: {}
		};
	},
	props: {
		scrollTopTo: {
			type: Number,
			default: 0
		}
	},
	methods: {
		tabClick(index) {
			this.cut = index;
			this.show = true;
			switch (index) {
				case 0:
					this.params.list = [
						{
							id: 1,
							label: '不限'
						},
						{
							id: 2,
							label: '昌平1'
						},
						{
							id: 3,
							label: '昌平2'
						},
						{
							id: 4,
							label: '昌平3'
						}
					];
					break;
				case 1:
					this.params = {
						title: '价格区间：',
						list: [
							{
								id: 1,
								label: '200万以下'
							},
							{
								id: 2,
								label: '200-500万'
							},
							{
								id: 3,
								label: '500-800万'
							},
							{
								id: 4,
								label: '800万以上'
							}
						]
					};
					break;
				case 2:
					this.params = {
						title: '价格区间万（元）',
						list: [
							{
								id: 1,
								label: '200万以下'
							},
							{
								id: 2,
								label: '200-300万'
							},
							{
								id: 3,
								label: '300-400万'
							},
							{
								id: 4,
								label: '400-500万以上'
							}
						]
					};
					break;
				case 3:
					this.params = {
						title: '价格区间万（元）',
						list: [
							{
								id: 1,
								label: '50m2'
							},
							{
								id: 2,
								label: '50m2-70m2'
							},
							{
								id: 3,
								label: '70m2-90m2'
							},
							{
								id: 4,
								label: '90m2-110m2'
							},
							{
								id: 5,
								label: '90m2-130'
							},
							{
								id: 6,
								label: '130m2-150m2'
							}
						]
					};
					break;
				default:
					break;
			}
		}
	}
};
</script>

<style lang="scss"></style>
